// 演示
<template>
  <div class="common-layout" style="height: 600px">
    <el-container style="height: 600px">
      <el-aside style=" padding-left: 20px; padding-top: 10px; display: flex; flex-direction: column; " >
        <el-row>
          <span style="margin: 10px">Paste Offset:</span>
        </el-row>
        <el-row>
          <div class="slider-demo-block" style="width: 300px">
            <el-slider
              v-model="pastOffestValue"
              :min="10"
              :max="80"
              :step="1"
              :show-tooltip="false"
              size="small"
              style="width: 300px"  
              show-input
            />
          </div>
        </el-row>
        <el-row>
          <el-switch
            v-model="isUseLocalStorageValue"
            class="ml-2"
          />
          <span>Use LocalStorage</span>
        </el-row>
        <el-row>
          <el-button @click="cellsCopy" type="primary" style="margin: 10px">复制</el-button>
        </el-row>
        <el-row>
          <el-button @click="cellsPaste" type="primary" style="margin: 10px">粘贴</el-button>
        </el-row>
        <el-row>
          <el-button @click="cleanClipboard" type="primary" style="margin: 10px">清空剪切板</el-button>
        </el-row>
      </el-aside>
      <el-main style="height: 600px">
        <div id="container"></div>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { Graph, DataUri, Shape } from "@antv/x6";
import { onMounted, ref } from "vue";

let graph = null;

const pastOffestValue = ref(30)
const isUseLocalStorageValue = ref(false)

const cellsCopy = () => {
  const cells = graph.getSelectedCells()
  if (cells && cells.length) {
    try {
      graph.copy(cells, {
        useLocalStorage: isUseLocalStorageValue?.value,
      })
      ElMessage({
        message: "复制成功",
        type: "success",
      });
    } catch (e) {
      ElMessage({
        message: "复制失败",
        type: "error",
      });
    }
  } else {
    ElMessage({
      message: "请先选中节点再复制",
      type: "info",
    });
  }  
};

const cellsPaste = () => {
  if (graph.isClipboardEmpty()) {
    ElMessage({
      message: "剪切板为空，不可粘贴",
      type: "info",
    });
  } else {
    try {
      const cells = graph.paste({
        offset: pastOffestValue.value,
        useLocalStorage: true,
      })
      graph.cleanSelection()
      graph.select(cells)
      ElMessage({
        message: "粘贴成功",
        type: "success",
      });
    } catch (e) {
      ElMessage({
        message: "粘贴失败",
        type: "error",
      });
    }
  }
};

const cleanClipboard = () => {
  try {
    if (!graph.isClipboardEmpty()) {
      graph.cleanClipboard();
    }
    ElMessage({
      message: "清空成功",
      type: "success",
    });
  } catch (e) {
    ElMessage({
      message: "清空失败",
      type: "error",
    });
  }
};





const renderGraph = () => {
  graph = new Graph({
    container: document.getElementById("container"),
    width: 800,
    height: 600,
    panning: true,
    grid: true, // 网格大小 10px，并绘制网格
    mousewheel: true,
    // 设置画布背景颜色
    background: {
      color: "#F2F7FA",
    },
    clipboard: {
      enabled: true,
      useLocalStorage: isUseLocalStorageValue?.value,
    },
    selecting: {
      enabled: true,
      showNodeSelectionBox: true,
    },
  });

  //创建流程图数据
  const data = {
    //节点数据
    nodes: [
      {
        id: "node1",
        shape: "rect",
        x: 40,
        y: 40,
        width: 100,
        height: 40,
        label: "hello",
        attrs: {
          body: {
            stroke: "#8f8f8f",
            strokeWidth: 1,
            fill: "#fff",
            rx: 6,
            ry: 6,
          },
        },
      },
      {
        id: "node2",
        shape: "rect",
        x: 160,
        y: 180,
        width: 100,
        height: 40,
        label: "world",
        attrs: {
          body: {
            stroke: "#8f8f8f",
            strokeWidth: 1,
            fill: "#fff",
            rx: 6,
            ry: 6,
          },
        },
      },
    ],
  };

  graph.fromJSON(data); // 渲染元素
  graph.centerContent(); // 居中显示
};

onMounted(() => {
  renderGraph();
});
</script>

<style scoped>
@import "../../assets/elementPlusDemo.css";
</style>
<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.slider-demo-block {
  max-width: 600px;
  display: flex;
  align-items: center;
}
.slider-demo-block .el-slider {
  margin-top: 0;
}
</style>
